<template>
  <div class="tag">
     <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <!-- <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item>视频监控</el-breadcrumb-item>
      <el-breadcrumb-item>标签配置</el-breadcrumb-item>
    </el-breadcrumb> 
     <el-divider direction="vertical" ></el-divider> 
    <span>标签配置(OSD设置)</span>
    <el-divider></el-divider>

  <div class="botm">
    <div class="right">
      <img src="../../assets/peidian.jpg" alt="">
      <div class="camera">
        <span class="el-icon-camera-solid"></span>
        </div>
    </div>
    <div class="left">

  <!-- `checked` 为 true 或 false -->
  <div><el-checkbox >显示名称</el-checkbox></div>
  <div><el-checkbox >显示日期</el-checkbox></div>
  <div><el-checkbox >显示星期</el-checkbox></div>
  <el-form  label-width="80px">
  <el-form-item label="通道名称">
    <el-input value="配电间" ></el-input>
  </el-form-item>
  <el-form-item label="时间格式">
    <el-select placeholder="24小时制" class="select">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="日期格式">
    <el-select placeholder="XXXX年XX月XX日" class="select">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <span>字符叠加</span>
 
  <div class="che">
     <el-checkbox >1</el-checkbox>
       <el-input  ></el-input>
     
  </div>
  <div class="che">
     <el-checkbox >2</el-checkbox>
       <el-input  ></el-input>
     
  </div>
  <div class="che">
     <el-checkbox >3</el-checkbox>
       <el-input  ></el-input>
     
  </div>
  <div class="che">
     <el-checkbox >4</el-checkbox>
       <el-input  ></el-input>
     
  </div>
  
     
      
    
 
  
</el-form>

</div>
  </div>
  <el-form  label-width="80px">
  <el-form-item label="OSD属性">
    <el-select placeholder="不透明，不闪烁" class="select">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="OSD字体">
    <el-select placeholder="自适应" class="select">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="黑白自动">
    <el-select placeholder="XXXX年XX月XX日" class="select">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="自定义">
    <el-select placeholder="XXXX年XX月XX日" class="select">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
  <el-button type="primary" style="display:block;margin:150px auto" >保存</el-button>
  </div>
  
</template>

<script>
export default {
data(){
  return{
    region:''
  }
}
}
</script>

<style lang="less" scoped>
.tag{

  /deep/.el-breadcrumb{
    background-color: #E9EDF0 !important;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    padding-left: 5px;
    margin-bottom: 20px;
   }
   .botm{
display: flex;

     margin-left: 30px;
.right{
     
     .camera{
       width: 596px;
       height: 20px;
       border: 1px solid #ccc;
       span{
        //  position: absolute;
      //  left: 42%;
    //  display: block;
     margin:auto;
       }
     }
     
   }
   .left{
      //  display: flex;
       margin-left: 50px;
       .el-checkbox{
         margin-bottom: 20PX;
        //  width: 400px;
       }
       .che{

        display: flex;
        // margin-top: 5px;
        .el-checkbox{
          margin-right: 50px;
          margin-top: 12px;
        }
       }
       .select{
        //  margin-left: 80px;
         width: 400px;
       }
      // .el-form-item{
      //  padding-right: 50px;
      // }
     }
   }
   
}
</style>